<template>
	<div class="col_center keyboard_wrap">
		<!-- <input type="text" ref="input" v-model="value" @click="getCurrently($event)" disabled/> -->
		<input type="text" ref="input" v-model="value" disabled  :placeholder="placeholder"/>
		<div :class="{
        'akeyboard-numberKeyboard': true
      }" @mousedown.stop.prevent>
			<div v-for="(row, index) of keysText" class="akeyboard-keyboard-number-innerKeys" :key="index">
				<div v-for="(key, idx) in row" :key="idx" :class="[
            'akeyboard-keyboard-number-keys',
            'akeyboard-numberKeyboard-keys',
            'akeyboard-keyboard-number-keys-' + keys[index][idx],
          ]" @click="handleClick(key, index, idx)">
					<span>
						{{ key }}
					</span>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: "Keyboard",
		props:{
			placeholder:{
				default:"请输入"
			}
		},
		data() {
			const keys = [];
			let thisKey = [];
			for (let i = 1; i < 10; i++) {
				thisKey.push(i);
				if (i % 3 === 0) {
					keys.push(thisKey);
					thisKey = [];
				}
			}
			keys.push([0, '.', 'Clear'])
			keys.push(['Enter'])
			return {
				keys,
				value: "",
				// cursort: null //点击后的光标位置
			};
		},
		methods: {
			handleClick(keyText, index, idx) {
				let that = this;
				const key = this.keys[index][idx];
				switch (key) {
					case "Clear":
						that.value = "";
						return;
						break;
					case "Delete":
						that.value = that.value.substr(0, that.value.length - 1);
						return;
						break;
					case "Enter":
						if (that.value == "") return
						console.log(that.value)
						that.$emit("confirm", that.value);
						return;
						break;
				}
				that.value += key
				// that.value = this.getTextValue(this.value, key)
				// //键盘新加代码
				// this.cursort++;
				// this.setCursorPosition();
			},
			// //获取光标事件
			// getCurrently(e) {
			// 	this.cursort = this.getCursortPosition();
			// },
			// //具体获得光标位置的方法
			// getCursortPosition() {
			// 	var cursorIndex = 0;
			// 	let selectionStart = this.$refs.input.$el.children[0].children[1].selectionStart
			// 	if (selectionStart || selectionStart == 0) {
			// 		cursorIndex = selectionStart
			// 	}
			// 	return cursorIndex;
			// },
			// //设置光标位置
			// setCursorPosition() {
			// 	var ctrl = document.activeElement;
			// 	if (ctrl.setSelectionRange) {
			// 		ctrl.focus();
			// 		ctrl.setSelectionRange(this.cursort, this.cursort);
			// 	} else if (ctrl.createTextRange) {
			// 		var range = ctrl.createTextRange();
			// 		range.collapse(true);
			// 		range.moveEnd("character", this.cursort);
			// 		range.moveStart("character", this.cursort);
			// 		range.select();
			// 	}
			// },
			// //处理
			// getTextValue(t, content, type) {
			// 	if (type === "Delete") {
			// 		let a = t.split("");
			// 		a.splice(this.cursort - 1, 1);
			// 		return a.join("");
			// 	} else {
			// 		let a = t.split("");
			// 		a.splice(this.cursort, 0, content);
			// 		return a.join("");
			// 	}
			// },
		},
		mounted() {},
		computed: {
			keysText() {
				let arr = [];
				this.keys.forEach((item) => {
					let arrSon = [];
					item.forEach((val) => {
						switch (val) {
							case "Clear":
								arrSon.push("清空");
								break;
							case "Delete":
								arrSon.push("删除");
								break;
							case "Enter":
								arrSon.push("开单");
								break;
							default:
								arrSon.push(val);
						}
					});
					arr.push(arrSon);
				});
				return arr;
			},
		},
	};
</script>
<style scoped lang="scss">
	@import url("~@/style/keyboard-number.scss");
     .uni-input-placeholder{
		 color: #AAAAAA;
	 }
	input {
		font-family: PingFangSC-Regular;
		font-size: 32rpx;
		color: #AAAAAA;
		letter-spacing: 1.33rpx;
		height: 80rpx;
		width: 600rpx;
		background: #FFFFFF;
		border: 2rpx solid #E2E2E2;
		border-radius: 12rpx;
		margin-bottom: 60rpx;
		text-align: center;
	}
</style>
